<template>
  <el-dialog title="新增员工" top="8vh" v-model="showDialog" :close-on-click-modal="false">
    <!-- 表单 -->
    <el-form label-width="120px" :model="formData" :rules="rules" ref="formRef">
      <el-form-item label="姓名" prop="username">
        <el-input style="width: 50%" placeholder="请输入姓名" v-model="formData.username" />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input style="width: 50%" placeholder="请输入手机号" v-model="formData.mobile"  />
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-date-picker style="width: 50%" placeholder="请选择入职时间" v-model="formData.timeOfEntry" />
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select style="width: 50%" placeholder="请选择" v-model="formData.formOfEmployment"> 
          <el-option v-for="item in formOfEmployeeData" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input style="width: 50%" placeholder="请输入工号" v-model="formData.workNumber" />
      </el-form-item>
      <el-form-item label="部门" prop="departmentName">
      <el-tree-select v-model="formData.departmentName" :props="defaultProps" :data="list"
        :render-after-expand="false" />
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <el-date-picker style="width: 50%" placeholder="请选择转正时间" v-model="formData.correctionTime" />
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { transListToTreeData } from '@/utils';
import type { Depts } from '@/types/departments'
import { getDeptsApi } from '@/api/departments'
import type { AddEmployeeParams } from '@/types/employee'
// @ts-ignore
import type { FormInstance } from 'element-plus'
import {addEmployeeApi} from '@/api/employee'
// @ts-ignore
import {ElMessage} from 'element-plus'


// 控制弹层的隐藏显示
const showDialog = ref(false);

// 打开弹层
const showDialogFn = ()=>{
  showDialog.value = true
}

// 关闭弹层
const closeDialog = () => {
  showDialog.value = false;
  // 清空表单
  formRef.value?.resetFields();
  // 清空部门详情
  formData.value = {
    username: "",
    mobile: "",
    formOfEmployment: "",
    workNumber: "",
    departmentName: "",
    timeOfEntry: "",
    correctionTime: ""
  }
}

// 新增员工请求参数
const formData = ref<AddEmployeeParams>({
  username: '',
  mobile: '', 
  formOfEmployment: '',
  workNumber: '',
  departmentName: '',
  timeOfEntry: '',
  correctionTime: ''
})

// 修正select 字段
const formOfEmployeeData = ref([
  {label: '正式', value: 1},
  {label: '非正式', value: 2}
])

// 展示树状结构树状列表
const list = ref<Depts[]>()
const getDepartmentList = async () => {
  const res = await getDeptsApi()
  list.value = transListToTreeData<Depts>(res.data.depts, '')
}
const defaultProps = {
  children: 'children',
  label: 'name',
}

// 定义form实例
const formRef = ref<FormInstance>()
onMounted(() => {
  getDepartmentList()
})

// 校验规则可以是响应式数据也可以不是响应式数据
const rules = {
  username: [
    { required: true, message: '用户姓名不能为空', trigger: ['blur', 'change'] },
    { min: 1, max: 4, message: '用户姓名为1-4位', trigger: ['blur', 'change'] }
  ],
  mobile: [
    { required: true, message: '手机号不能为空', trigger: ['blur', 'change'] },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: ['blur', 'change'] }
  ],
  formOfEmployment: [
    { required: true, message: '聘用形式不能为空', trigger: ['blur', 'change'] }
  ],
  workNumber: [
    { required: true, message: '工号不能为空', trigger: ['blur', 'change'] }
  ],
  departmentName: [
    { required: true, message: '部门不能为空', trigger: ['blur', 'change'] }
  ],
  timeOfEntry: [
    { required: true, message: '请选择入职时间', trigger: ['blur', 'change'] }
  ]
}

const emit = defineEmits(['updateEmployees'])

// 提交表单
const submitForm = async() =>{
  // 表单校验
  await formRef.value?.validate()
  // 发起新增员工请求
  await addEmployeeApi(formData.value)
  // 提示用户添加成功
  ElMessage.success('添加成功')
  // 关闭弹层
  closeDialog()
  // 刷新列表
  emit('updateEmployees')

}


// 暴露给父组件
defineExpose({
  showDialogFn,
})

</script>